<template>
  <!--  地图容器 -->
  <div id="map" style="height: 100vh; width: 100%">

  </div>

  <!-- 地图属性设置 -->
  <div class="map-overlay">
    <div class="map-overlay-inner">
      <fieldset class="select-fieldset">
        <label>请选择当前时间点</label>
        <select id="lightPreset" name="lightPreset">
          <option value="dawn">黎明</option>
          <option value="day">白天</option>
          <option value="dusk">傍晚</option>
          <option value="night">夜晚</option>
        </select>
      </fieldset>
      <fieldset>
        <label for="showPlaceLabels">是否展示地区信息</label>
        <input type="checkbox" id="showPlaceLabels" checked=""/>
      </fieldset>
      <fieldset>
        <label for="showPointOfInterestLabels">
          是否展示信息点
        </label>
        <input type="checkbox" id="showPointOfInterestLabels" checked=""/>
      </fieldset>
      <fieldset>
        <label for="showRoadLabels">展示道路标志信息</label>
        <input type="checkbox" id="showRoadLabels" checked=""/>
      </fieldset>
      <fieldset>
        <label for="showTransitLabels">展示运输点标志信息</label>
        <input type="checkbox" id="showTransitLabels" checked=""/>
      </fieldset>

    </div>
  </div>
</template>
<script setup>
import mapboxgl  from "mapbox-gl";
import MapboxDraw from '@mapbox/mapbox-gl-draw'
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
import {onMounted} from "vue";
let map;
/*
* 更改地图的样式配置属性
* 当用户单击配置属性，使用【setConfigProperty】关键字basemap来设置地图要素
* dawn -> day -> dusk -> night
* https://docs.mapbox.com/mapbox-gl-js/example/
* https://docs.mapbox.com/mapbox-gl-js/example/set-config-property/
* */
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'
  // init map
  map = new mapboxgl.Map({
    container: 'map', // 地图容器id,
    style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
    center: [2.2932, 48.86069], // 地图初始中心【经纬度】 starting position
    zoom: 15.1, // 地图初始缩放界别41 // starting zoom
    projection: 'globe', // 地图投影 为3D地球
    pitch: 62, // 相对于地面3D视角的角度 // starting pitch
    bearing: -20, // 东西南北 方向 正北方为0 // starting bearing
    antialias: false, // 抗锯齿，通过false关闭提升性能
    essential: true,
    renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效
    skipOnboarding: true,//可选择不等待瓦片加载
  })

  // Mapbox GL JS中的图层是异步的，通过使用事件绑定在合适的时间更改地图
  // POI 信息点
  //
  map.on('style.load', () => {
    initControls();
    initSourceAndLayers();
  })


})

const initSourceAndLayers = () => {

  map.addSource('line', {
    type: 'geojson',
    lineMetrics: true,
    data: {
      type: 'LineString',
      coordinates: [
        [2.293389857555951, 48.85896319631851],
        [2.2890810326441624, 48.86174223718291]
      ]
    }
  })

  map.addLayer({
    source: 'line',
    id: 'line',
    type: 'line',
    paint: {
      'line-width': 12,
      'line-emissive-strength': .8,
      'line-gradient': [
        'interpolate',
        ['linear'],
        ['line-progress'],
        0,
        'red',
        1,
        'blue'
      ]
    }
  })

  document.getElementById('lightPreset')
    .addEventListener('change', () => {
      map.setConfigProperty('basemap', 'lightPreset', this.value);
    })

  document.getElementById('.map-overlay-inner input[type="checkbox"]')
    .forEach((checkbox) => {
      checkbox.addEventListeners('change', () => {
        map.setConfigProperty('basemap', this.id, this.checked)
      })
    })
}

const initControls = () => {
  map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
  map.addControl(new mapboxgl.GeolocateControl())
  map.addControl(new mapboxgl.FullscreenControl())
  map.addControl(new mapboxgl.NavigationControl({visualizePitch: true}))
  map.addControl(new mapboxgl.ScaleControl())
  // initDrawBox();
}
const initDrawBox = () => {
  let Draw = new MapboxDraw({
    controls: {
      point: true,
      line_string: true,
      polygon: true,
      trash: true,
    },
    displayControlsDefault: false,
  })
  map.addControl(Draw, 'top-left')
}
</script>


<style scoped lang="scss">
.map-overlay {
  font:
      12px/20px 'Helvetica Neue',
      Arial,
      Helvetica,
      sans-serif;
  position: absolute;
  width: 200px;
  top: 0;
  left: 0;
  padding: 10px;
}

.map-overlay .map-overlay-inner {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 10px;
}

.map-overlay-inner fieldset {
  display: flex;
  justify-content: space-between;
  border: none;
}

.map-overlay-inner label {
  font-weight: bold;
  margin-right: 10px;
}

.map-overlay-inner .select-fieldset {
  display: block;
}

.map-overlay-inner .select-fieldset label {
  display: block;
  margin-bottom: 5px;
}

.map-overlay-inner .select-fieldset select {
  width: 100%;
}
</style>
